<template>
  <div class="crumb">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item v-for="item,index in title" :key="index">{{item}}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // title的值和当前所在的路由有关
      // 当前路由一发生变化，title的值就会变化，所以需要监听路由的变化
      title: [],
    };
  },
  watch: {
    //  $route 表示获取当前路由对象
    $route: {
      immediate: true, //刷新页面就立即监听
      handler(newVal, oldVal) {
        //   当前路由对象：this.$route   里面可以由元信息meta （meta存放当前路由的相关数据）
        this.title = this.$route.meta.title;
      },
    },
  },
};
</script>
 
<style lang = "less" scoped>
.crumb .el-breadcrumb {
  line-height: 50px;
  font-size: 15px;
}
</style>